<template>
	<view class="content">
        <view class="u-p-b-20">
            <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入内容" @search="doSearch"></u-search>
        </view>
        
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="store_name">{{ item.name }}</view>
			<view class="list_tit u-p-b-14">
				所属机构：{{ item.institution }}
			</view>
			<view class="u-flex" style="line-height: 1;">
				<view class="list_tit name">
					店长名称：{{ item.shop_name }}
				</view>
				<view class="u-flex u-flex-1">
					<image src="../../static/icons/tel_03.png" mode="" class="tel"></image>
					<view class="list_tit">{{ item.shop_phone }}</view>
				</view>
			</view>
			<view class="u-flex u-row-right u-p-t-15">
				<view class="list_btn u-m-r-10" @click="$gTo('../storeManage/add?id=' + item.id)">
					编辑
				</view>
				<view class="list_btn" @click="del(item)">
					删除
				</view>
			</view>
		</view>
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
		<view class="add" @click="$gTo('../storeManage/add')">
			添加门店
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
                keyword: '',
			}
		},
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods: {
            // 删除门店
            del(item) {
                uni.showModal({
                	title: '温馨提示',
                	content: '确认删除吗？',
                	success: (res) => {
                		if (res.confirm) {
                			this.$ajax('institution_delete', {
                                user_token: this.$getSync('userToken'),
                                id: item.id,//机构id
                			}).then(ret => {
                			    if (ret.success == 1000) {
                			        this.$toast('删除成功');
                                    setTimeout(() => {
                                        this.doSearch()
                                    }, 500)
                			    } else {
                			        this.$toast(ret.msg);
                			    }
                			});
                		} else if (res.cancel) {
                			
                		}
                	}
                });
            },
            
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            // 获取列表
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('stores_manage', {
					user_token: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
                    name: this.keyword,//搜索
				}).then(ret => {
					if (ret.success == 1000) {
						if (ret.detail.data && ret.detail.data.length > 0) {
							this.list = this.list.concat(ret.detail.data);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
		}
	}
</script>
<style>
	page{background-color: #f5f5f5!important;}
</style>
<style scoped>
    
    
    
.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		/* border-top: 2rpx solid #ebebeb; */
		padding: 20rpx 20rpx 150rpx;
	}
	.search_box{
		width: 100%;
		height: 66rpx;
		border-radius: 33rpx;
		box-shadow: 0 0 2rpx #e3e3e3;
		background-color: #fff;
		padding: 0 28rpx;
		margin-bottom: 30rpx;
	}
	.s_icon{
		width: 27rpx;
		height: 27rpx;
		margin-right: 14rpx;
	}
	.s_input{
		flex: 1;
		height: 66rpx;
		font-size: 26rpx;
		line-height: 66rpx;
		color: #000;
	}
	.list{
		width: 100%;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 34rpx 32rpx 22rpx;
		background-color: #fff;
	}
	.store_name{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		padding-bottom: 15rpx;
	}
	.list_tit{
		font-size: 26rpx;
		color: #000000;
	}
    .name{
        max-width: 420rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 10rpx;
    }
	.tel{
		width: 18rpx;
		height: 26rpx;
		margin-right: 12rpx;
	}
	.list_btn{
		width: 114rpx;
		height: 52rpx;
		border-radius: 26rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		color: #5f8fbe;
		text-align: center;
		border: 2rpx solid #5f8fbe;
	}
	.add{
		width: 100%;
		height: 92rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 20;
		font-size: 36rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		background-color: #00a0e9;
	}
</style>
